init()
function init(){
    let span = document.querySelectorAll('#content span')
let line = document.querySelector('#line')
function indicator(e) {
    line.style.left = e.offsetLeft - 40 + 'px'
    // line.style.width=e.offsetWidth+'px'
    return e;
}
span.forEach(link => {
    link.addEventListener('click', e => {
        indicator(e.target)
    })
})

let login = document.getElementById('login')
let operation = document.getElementById('operation')
let copy = document.getElementById('copy')
let operationtype = document.getElementById('operationtype')
let btn1 = document.getElementById('btn1')
let btn2 = document.getElementById('btn2')
let biaodan = document.getElementById('biaodan')
let content_bottom = document.getElementById('content_bottom')
login.onclick = function () {
    copy.style.display = 'block'
    operationtype.style.display = 'none'
    btn1.style.display = 'none'
    btn2.style.display = 'none'
    biaodan.style.display = 'none'
    content_bottom.style.display = 'none'
    operation.style.color = '#999999'
    login.style.color = '#0066CC'
}
operation.onclick = function () {
    copy.style.display = 'none'
    operationtype.style.display = 'block'
    btn1.style.display = 'inline-block'
    btn2.style.display = 'inline-block'
    biaodan.style.display = 'block'
    content_bottom.style.display = 'block'
    operation.style.color = '#0066CC'
    login.style.color = '#999999'
}

let user = [{ id: 1, type: '维护', content: '更新设备-成功', stuff: 'test01', time: '2023-2-24' },
{ id: 2, type: '检查', content: '更新设备-成功', stuff: 'test02', time: '2023-2-25' },
{ id: 3, type: '保养', content: '更新设备-成功', stuff: 'test03', time: '2023-2-26' },
{ id: 4, type: '翻新', content: '更新设备-成功', stuff: 'test04', time: '2023-2-27' },
{ id: 5, type: '维修', content: '更新设备-成功', stuff: 'test05', time: '2023-2-28' },
{ id: 6, type: '损坏', content: '更新设备-成功', stuff: 'test06', time: '2023-3-1' },
{ id: 7, type: '更新', content: '更新设备-成功', stuff: 'test07', time: '2023-3-2' },
{ id: 8, type: '更新', content: '更新设备-成功', stuff: 'test08', time: '2023-3-3' },];

// window.onload = function () {
// disPlayData();//显示数据
// addBtn4Event();//添加btn4的事件
// }
function disPlayData() {
    $('#tball').html('')
    let fragment1 = document.createDocumentFragment();
    for (let i = 0; i < user.length; i++) {
        let tr = document.createElement('tr');
        tr.innerHTML = `
    <td>${user[i].id}</td>
        <td>${user[i].type}</td>
            <td>${user[i].content}</td>
                <td>${user[i].stuff}</td>
                    <td>${user[i].time}</td> `;
        fragment1.appendChild(tr);
    }
    $('#tball').append(fragment1)
}

disPlayData()
addBtn1Event1()

// addBtn4Event();//添加btn4的事件

// 添加删除事件
function addBtn1Event1() {
    $('#btn1').click(function (e) {
        let id = $('e.target').attr('data-index');
        // console.log(123)
        Btn1UserDataById(id);
        disPlayData();
    })


}
// 根据id 删除对应数组
function Btn1UserDataById(id) {
    user.length = 0;

    for (let i = 0; i < user.length; i++) {
        if (user[i].id == id) {
            user.splice(i, 1);
            break;
        }
    }
}

// let btn4=document.getElementById('btn4')
// btn4.onclick=function(){
//     tball.innerHTML=''
// }



let user1 = [{ id: 1, number: 'test01', ip: '113.204.9.70', area: '重庆联通', time: '2023-2-24' },
{ id: 2, number: 'test01', ip: '113.205.9.70', area: '重庆联通', time: '2023-2-25' },
{ id: 3, number: 'test01', ip: '113.206.9.70', area: '重庆联通', time: '2023-2-26' },
{ id: 4, number: 'test01', ip: '113.207.9.70', area: '重庆联通', time: '2023-2-27' },
{ id: 5, number: 'test01', ip: '113.208.9.70', area: '重庆联通', time: '2023-2-28' },
{ id: 6, number: 'test01', ip: '113.209.9.70', area: '重庆联通', time: '2023-3-1' },
{ id: 7, number: 'test01', ip: '113.210.9.70', area: '重庆联通', time: '2023-3-2' },
{ id: 8, number: 'test01', ip: '113.211.9.70', area: '重庆联通', time: '2023-3-3' },];

// window.onload = function () {
//     disPlayData1();//显示数据
//     addBtn4Event1();//添加btn4的事件
// }
function disPlayData1() {
    $('#tball1').html('')
    let fragment1 = document.createDocumentFragment();
    for (let i = 0; i < user.length; i++) {
        let tr = document.createElement('tr');
        tr.innerHTML = `
    <td>${user1[i].id}</td>
        <td>${user1[i].number}</td>
            <td>${user1[i].ip}</td>
                <td>${user1[i].area}</td>
                    <td>${user1[i].time}</td> `;
        fragment1.appendChild(tr);
    }
    $('#tball1').append(fragment1)
}
disPlayData1()
addBtn4Event1()
// 添加删除事件
function addBtn4Event1() {
    $('#btn4').click(function (e) {
        let id = $('e.target').attr('data-index');

        Btn4UserDataById(id);
        disPlayData1();
    })


}
// 根据id 删除对应数组
function Btn4UserDataById(id) {
    user1.length = 0;

    for (let i = 0; i < user1.length; i++) {
        if (user1[i].id == id) {
            user1.splice(i, 1);
            break;
        }
    }
}

//查询
let tball = document.getElementById('tball');
// let btn2 = document.getElementById('btn1');
btn2.onclick = function () {
    let one = document.getElementById('search').value;
    for (let i = 0; i < user.length; i++) {
        if (user[i].type == one) {
            tball.rows[i].style.display = 'table-row'
        } else {
            tball.rows[i].style.display = 'none'
        }
    }
}

let tball1 = document.getElementById('tball1');
// let btn2 = document.getElementById('btn1');
btn5.onclick = function () {
    let one = document.getElementById('search1').value;
    for (let i = 0; i < user1.length; i++) {
        if (user1[i].ip == one) {
            tball1.rows[i].style.display = 'table-row'
        } else {
            tball1.rows[i].style.display = 'none'
        }
    }
}
//    btn2.onclick=function(){
//     inquire()
//     function inquire() {
//         // { id: 1, PrincipalName: '原生广场', displayStatus: '显示', remark: '无备注', RegionName: 'A区' },
//         let SubjectName = $('#SubjectName').val();//输入框
//         let selects = document.getElementById('selects').value;//选择框
//         let tball = $('tball')[0];
//         if (SubjectName == "") {
//             //Alert
//             alert('请输入主体名称');
//             return;
//         }
//         document.querySelector('tball').innerHTML = '';
//         if (selects == '更新设备-成功') {
//             for (let i = 0; i < user.length; i++) {
//                 if (user[i].type == SubjectName) {
//                     let tr = '<tr><td>' + (user[i].id) + '</td><td>' + (user[i].type) + '</td><td>' + (user[i].content) + '</td><td>' + (user[i].stuff) + '</td><td>' + (user[i].time);
//                     // console.log(place[i].id);
//                     $('#biaodan tbody').append(tr);;
//                 }
//             }
//         } else {
//             for (let i = 0; i < user.length; i++) {
//                 if (user[i].type == SubjectName && user[i].content == content) {
//                     let tr = '<tr><td>' + (user[i].id) + '</td><td>' + (user[i].type) + '</td><td>' + (user[i].content) + '</td><td>' + (user[i].stuff) + '</td><td>' + (user[i].time);
//                     // console.log(place[i].id);
//                     $('#biaodan tbody').append(tr);;
//                 }
//             }
//         }

//     }
//    }


// btn2.onclick=function(){
//     let type=document.getElementById('type');
//     let content=document.getElementById('content');
//     let stuff=document.getElementById('stuff');
//     let tball=document.getElementById('tball');
//     if(type=''){
//         alert('请输入操作类型')
//     }
// }
// btn2.onclick = function () {
//     let number1 = document.getElementById('number').value;
//         let loginip2 = document.getElementById('loginip').value;


//         let area3 = document.getElementById('area').value;
//         let tball = document.getElementById('tball');
//     if (number == '') {
//         alert('请输入账号');
//     }
//     if(loginip===loginip){
//         for(let i=0;i<user.length;i++){
//             if(user[i].number=number){
//                 tball.rows[i].style.display='table-row'
//             }else{
//                 tball.rows[i].style.display='none'
//             }
//         }
//     }
// }
    //分页
paging();
function paging() {
let page = 1;//第几页
let no = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0
let serialNumber = user.length;//序号
onlouad(0, 3)//初始页面信息，第一页
$("#inputPage").val(page);//页码


// 下一页
$("#nextpage").click(function () {
if (no + 3 < serialNumber) {//如果no+5小于数据条数
no += 3;
page++;
$("#inputPage").val(page);
if (serialNumber >= (no + 3)) {
onlouad(no, no + 3);
} else (
onlouad(no, serialNumber)

)
}

});

// 上一页
$("#lastpage").click(function () {
if (no - 3>= 0) {
no -= 3;
page--;
$("#inputPage").val(page);
onlouad(no, no + 3);
}
});
}


function onlouad(n,a) { //分页调用函数
$("#tball").html("")
//文档碎片
let fragment1 = document.createDocumentFragment();
for (let i = n; i < a; i++) {
let tr = document.createElement("tr");
tr.innerHTML = `
<td>${user[i].id}</td>
<td>${user[i].type}</td>
<td>${user[i].content}</td>
<td>${user[i].stuff}</td>
<td>${user[i].time}</td>

`;

fragment1.appendChild(tr);
}
$("#tball").append(fragment1);
}




//分页2
paging1();
function paging1() {
let page1 = 1;//第几页
let no1 = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0
let serialNumber1 = user1.length;//序号
onlouad1(0, 3)//初始页面信息，第一页
$("#inputPage1").val(page1);//页码


// 下一页
$("#nextpage1").click(function () {
if (no1 + 3 < serialNumber1) {//如果no+5小于数据条数
no1 += 3;
page1++;
$("#inputPage1").val(page1);
if (serialNumber1 >= (no1 + 3)) {
onlouad1(no1, no1 + 3);
} else (
onlouad1(no1, serialNumber1)

)
}

});

// 上一页
$("#lastpage1").click(function () {
if (no1 - 3>= 0) {
no1 -= 3;
page1--;
$("#inputPage1").val(page1);
onlouad1(no1, no1 + 3);
}
});
}


function onlouad1(n,a) { //分页调用函数
$("#tball1").html("")
//文档碎片
let fragment1 = document.createDocumentFragment();
for (let i = n; i < a; i++) {
let tr = document.createElement("tr");
tr.innerHTML = `
<td>${user1[i].id}</td>
<td>${user1[i].number}</td>
<td>${user1[i].ip}</td>
<td>${user1[i].area}</td>
<td>${user1[i].time}</td>

`;

fragment1.appendChild(tr);
}
$("#tball1").append(fragment1);
}

}